<template>
  <div class="dropMenu">
    <div
      class="dropMenuMain"
      @mouseover="showMenuBody"
      @mouseleave="leaveMenuMain"
      @touchmove="showMenuBody"
      @touchend="leaveMenuMain"
    >
<!--      <Icon type="ios-list" />-->
      <Icon type="ios-person" />
      <span>{{userNick}}</span>
    </div>
    <!-- 菜单内容-->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @leave="leave"
      @after-leave="afterLeave"
    >
      <div
        class="dropMenuBody"
        v-show="isShowBody"
        @mouseover="showMenuBody"
        @mouseleave="leaveMenuMain"
        @touchmove="showMenuBody"
        @touchend="leaveMenuMain"
      >
        <template v-for="(menu,index) in menuList">
          <div class="dropMenuBodyList" :key="menu.name" @click="turnToPage(menu)">
<!--            <div :class="menu.icon"></div>-->
            <div class="dropMenuTitle">{{menu.title}}</div>
          </div>
        </template>
      </div>
    </transition>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
  name: "",
  props: {
    menuList: {
      type: Array
    }
  },
  data() {
    return {
      isShowBody: false,
      elTransition: "0.3s all",
      userNick:'',
    };
  },
  methods: {
    logOut(){
        // console.log("退出登录")
        let that=this;
        this.$app.post('/tuser/loginOut', {}).then((res)=>{
          if(res.data.code==0){
              that.$app.setHeader('');
              Cookies.remove('userName');
              Cookies.remove('userNick');

              that.$Message.success("退出成功");
              that.$router.push({
                  name: 'login'
              });
          }
        });

    },
    updatePwd(){},
    turnToPage(menu) {
      // console.log();
        if(menu.type==0){
            // this.$Message.success("执行")
            menu.method();
        }else{
            this.$router.push({
                name:menu.name,
            });
        }

    },
    beforeEnter(el) {
      // 动画之前
      el.style.height = 0;
    },
    enter(el) {
      // 动画过程
      let height = el.scrollHeight;
      el.style.transition = this.elTransition;
      el.style.height = `${height}px`;
    },
    afterEnter(el) {
      // 动画之后
      // console.log("展开动画完成");
    },
    leave(el) {
      // 动画过程
      el.style.height = 0;
    },
    afterLeave(el) {
      // console.log("关闭动画完成");
    },
    showMenuBody() {
      // console.log("关闭动画完成");
      this.isShowBody = true;
    },
    leaveMenuMain() {
      this.isShowBody = false;
    }
  },
  watch: {
    menuList(val) {
      console.log("val", val);
    }
  },
    mounted() {
      this.userNick=Cookies.get("userNick")
    }
};
</script>

<style lang="less" scoped>
@import url("./SideMenu.less");
</style>
